<template>
  <div>
    <my-div class="wrapper" day_bg="#f1f1f1" night_bg="#000000">
                <wallet-head @toggle_eye="toggle_eye =! toggle_eye"></wallet-head>
                <list class="list" :show-scrollbar="false">
                   <!-- 下拉刷新 -->
                  <my-refresh @onRefresh="init"></my-refresh>
                  <cell v-for="item of user_wallets" :key="item">
                    <my-div class="wallet-wrapper" >
                      <my-text day_color="rgba(70,120,245,1)" night_color="rgba(184,111,36,1)" :text="`${item.name}/${item.companyName}`" class="city-name"></my-text>
                      <div class="city-label">
                        <div style="width:325px;">
                          <text class="city-label-name">{{$t('wallet.may_use')}}</text>
                          <my-text :text="toggle_eye?item.total:close_eye(item.total)" class="city-label-count"></my-text>
                        </div>
                        <div style="width:325px;">
                          <text class="city-label-name">{{$t('wallet.lock_house')}}</text>
                          <my-text :text="toggle_eye?item.lock:close_eye(item.lock)" class="city-label-count"></my-text>
                        </div>
                      </div>
                      <div class="operate">
                        <text class="operate-transfer" @click="turn_in(item.name)">{{$t('wallet.change_into')}}</text>
                        <text class="operate-put" @click="turn_out(item.name,item.companyName)">{{$t('wallet.turn_out')}}</text>
                        <text class="operate-transfer" v-if="item.isTransferOut" @click="wallet_coin(item)">{{$t('wallet.coin')}}</text>
                        <text v-if="item.name ==='AXC' || item.name ==='BTC'" class="operate-put" @click="exchange(item.name)">{{$t('wallet.we_change')}}</text>
                        <div @click="record(item)">
                          <my-text day_color="rgba(60,71,98,1)" night_color="rgba(184,111,36,1)" :text="$t('wallet.bill')" class="operate-account" ></my-text>
                        </div>
                      </div>
                    </my-div>
                  </cell>
                  <cell style="width:750px;height:40px;"></cell>
                </list>
  
  </my-div>
  </div>
</template>
<style scoped>

.wallet{
  width: 750px;
  height: 310px;
  flex: 1;
}
.wrapper{
  flex:1;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  padding-bottom: 100px;
}



.wallet-wrapper{
  width: 690px;
  margin-left: 30px;
  padding-left: 40px;
  margin-top: 36px;
  border-radius: 4px;
}
.city-name{
  margin-top: 30px;
  font-size: 30px;
  font-family: PingFang SC;
  line-height: 36px;
}
.city-label{
  display: flex;
  flex-direction: row;
  margin-top: 18px;
  margin-bottom: 30px;
}
.city-label-name{
  font-size: 24px;
  color: rgba(154,156,164,1);
}
.city-label-count{
  font-size: 36px;
   margin-top: 18px;
}
.operate{
  width: 690px;
  height: 60px;
  margin-left: -40px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(233,233,233,1);
}
.operate-transfer{
  opacity: 1;
  font-size: 28px;
  font-family: PingFang SC;
  color: rgba(44,177,156,1);
  line-height: 36px;
}
.operate-put{
  font-size: 28px;
  font-family: PingFang SC;
  color: rgba(237,91,20,1);
  line-height: 36px;
}
.operate-account{
  font-size: 28px;
  font-family: PingFang SC;
  line-height: 36px;
}
</style>
<script>
import MyRefresh from '../../component/my-refresh.vue'
import WalletHead from './walletHead.vue'
export default {
  name: '',
  data(){
    return{
      user_wallets:[],
      toggle_eye:true,
      timer:null
    }
  },
  components: {MyRefresh,WalletHead},
  created() {
    var st = weex.requireModule('static');
    var nav = weex.requireModule('navigator');
    nav.setRoot('wallet')
    nav.setPageId('wallet')
    let notify=weex.requireModule('notify')
    notify.regist('update_data',(data)=>{
      setTimeout(()=>{
        this.get_users_wallet()
      },1000)
    })
  },
  mounted() {
    this.timer = setInterval(()=>{
      this.repeat_users_wallet()
    },300*1000)
  },
  beforeDestroy() {
    if(this.timer) clearInterval(this.timer)
    this.timer = null
  },
  methods: {
      init(){
        var nav = weex.requireModule('navigator') ;
        nav.setRoot('wallet')
        nav.setPageId('wallet')
        const obj =  this.pref.get('wallet_list')
        if(obj) this.user_wallets = obj.wallet_list || []
        this.get_users_wallet()
      },
      open_eye(){
        return this.toggle_eye ? `root:img/${theme}/wallet/keshi@2x.png` : `root:img/${theme}/wallet/keshi@2x.png`
      },
      get_users_wallet(){
        this.$http.get('wallet/listUserWalletInfo',{accountId:this.current_wallet.account_id},(res)=>{
          this.pref.set('wallet_list',{wallet_list:res.result})
          this.user_wallets = res.result
        },()=>{
          if(this.user_wallets.length>0) return  
          this.get_users_wallet()
        })
      },
      repeat_users_wallet(){
        this.$http.getSilent('wallet/listUserWalletInfo',{accountId:this.current_wallet.account_id},(res)=>{
          this.pref.set('wallet_list',{wallet_list:res.result})
          this.user_wallets = res.result
        },()=>{
          if(this.user_wallets.length>0) return  
          this.get_users_wallet()
        })
      },
      close_eye(val){
        return val.toString().replace(/[0-9]|[.]/g,'*')
      },
      turn_in(name){
        this.push('root:pages/wallet/transfer.js',{name:name,wallet_types:this.user_wallets})
      },
      turn_out(name,companyName){
         this.push('root:pages/wallet/vent.js',{name:name,companyName:companyName,wallet_types:this.user_wallets})
      },
      wallet_coin(item){
         this.push('root:pages/wallet/coin.js',{data:item,wallet_types:this.user_wallets})
      },
      record(data){
        this.push('root:pages/wallet/bill.js',{wallet:data})
      },
      exchange(){
        this.push('root:pages/wallet/exchange.js')
      }
    }

}
</script>
